<template>
  <div class="serviceContent">
    <div class="bg-white p-t p-b">
      <div class="content-wrap" v-if="data.type=='receive'">
        <!-- 国际接机 -->
        <ul class="content" v-if="data.inOrOut=='out'">
          <li class="content-item" @click="bookNow">
            <div class="content-item-icon iconfont icon-jiejijupai"></div>
            <div class="content-item-label">举牌接机</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-baiduche"></div>
            </div>
            <div class="content-item-label">摆渡车下车点接机</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-jiejixiezhutiquhangli"></div>
            </div>
            <div class="content-item-label">协助提取行李</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjipeitonganjian"></div>
            </div>
            <div class="content-item-label">专人陪过安检</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-jiejisongdadaochengzuojiaotonggongjuchu"></div>
            </div>
            <div class="content-item-label">专人陪同送至乘坐交通工具处离开</div>
          </li>
        </ul>
        <!-- 国内接机 -->
        <ul class="content" v-else>
          <li class="content-item" @click="bookNow">
            <div class="content-item-icon iconfont icon-jiejijupai"></div>
            <div class="content-item-label">举牌接机</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-baiduche"></div>
            </div>
            <div class="content-item-label">摆渡车下车点接机</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-jiejixiezhutiquhangli"></div>
            </div>
            <div class="content-item-label">协助提取行李</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-jiejisongdadaochengzuojiaotonggongjuchu"></div>
            </div>
            <div class="content-item-label">专人陪同送至乘坐交通工具处离开</div>
          </li>
        </ul>
      </div>
      <div class="content-wrap" v-if="data.type=='send'">
        <!-- 国际送机 -->
        <ul class="content" v-if="data.inOrOut=='out'">
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-zhuanren"></div>
            </div>
            <div class="content-item-label">停车场快轨出口站专人迎客</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjipeitongbanlizhijishouxu"></div>
            </div>
            <div class="content-item-label">协办乘机手续</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjihanglituoyun"></div>
            </div>
            <div class="content-item-label">代办行李托运</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjipeitonganjian"></div>
            </div>
            <div class="content-item-label">专人陪过三检</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjisongwangdengji"></div>
            </div>
            <div class="content-item-label">专人送抵登机口</div>
          </li>
        </ul>
        <!-- 国内送机 -->
        <ul class="content" v-else>
          <li class="content-item" @click="bookNow">
            <div class="content-item-icon iconfont icon-zhuanren"></div>
            <div class="content-item-label">停车场快轨出口站专人迎客</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjipeitongbanlizhijishouxu"></div>
            </div>
            <div class="content-item-label">代办乘车手续</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjihanglituoyun"></div>
            </div>
            <div class="content-item-label">代办行李托运</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjipeitonganjian"></div>
            </div>
            <div class="content-item-label">专人陪过安检</div>
          </li>
          <li class="content-item"  @click="bookNow">
            <div class="content-item-icon">
              <div class="content-item-icon iconfont icon-songjisongwangdengji"></div>
            </div>
            <div class="content-item-label">专人送低登机口</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="explain pd">
      <h2>服务说明</h2>
      <ul>
        <li><span>·</span>请至少提前24小时下单预约；</li>
        <li><span>·</span>礼宾员提前一天与您确认服务人数，具体到达时间及航班信息；</li>
        <li><span>·</span>若需取消订单，请在航班起飞或到达前12小时办理；</li>
        <li><span>·</span>客服电话：4006-340-777</li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ServiceContent',
    props: {
      data: ''
    },
    data () {
      return {
      }
    },
    mounted () {
    },
    methods: {
      bookNow () {
        this.$emit('bookNow')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  // @import '../../font/iconfont.css';
  .serviceContent{
    color: #666;
    font-size: 0.22rem;
    h2{
      font-size: 0.3rem;
      font-weight: bold;
      color: #333;
    }
    .content-wrap{
      overflow: hidden;
      ul.content{
        text-align: center;
        white-space: nowrap;
        overflow: scroll;
        display: table;
        .content-item{
          display: table-cell;
          text-decoration: none;
          width: 2rem;
          height: 2rem;
          .content-item-icon{
            width: 0.6rem;
            height: 0.6rem;
            margin: 0 auto 5px;
            font-size: 0.6rem;
          }
          .content-item-label{
            padding: 0 0.16rem;
            white-space: normal;
            height: 1.2rem;
            overflow: hidden;
          }
        }
      }
    }
    .explain{
      line-height: 0.6rem;
      padding-bottom: 1.4rem;
      ul{
        li{
          font-size: 0.26rem;
          span{
            font-size: 0.6rem;
            display: inline-block;
            transform: translateY(0.12rem)
          }
        }
      }
    }
  }
</style>
